<template>
  <div class="option-site-footer">
    <span>共{{count}}条/共{{total}}页/第{{index}}页</span>

    <div class="point">
      <div class="pre" v-if="index > 1" @click="preClick">上一页</div>

      <div v-for="j in total">
        <span v-if="j <= 5">{{j}}</span>
        <span v-else-if="j === 6">...</span>
        <span v-else-if="j === total">{{total}}</span>
      </div>

      <div class="next" v-if="index < total" @click="nextClick">下一页</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Footer",
    props: {
      count: {
        type: Number,
        default: 0
      },
      total: { // 总页数
        type: Number,
        default: 0
      },
      index: { // 当前页
        type: Number,
        default: 1
      }

    },
    data() {
      return {

        /**通过事件总线发来的筛选信息*/
        id: 0, // 商品id
        goods_category_id: 0, // 商品类目id
        root_category_id: 0, // 商品root类目id
        name_describe_goodsCategoryName_rootCategoryName: '', // 商品名字、描述,或者商品的商品类目名字、商家用户名、root类目名
      }
    },
    computed: {
    },
    mounted() {
      this.$bus.$on('goodsBus', ({rci, gcd, n_d_gcn_rcn}) => { // 接收事件总线发来的筛选用户条件,如性别,商家与否,查询信息;以确保在筛选后还能够使用上一页、下一页、等功能
        // console.log('footer-mounted:s=' + s + ';----b=' + b + ';------search=' + search + ';---index=' + this.index); // 因为声明周期函数的原因,这个index的值获取有可能不对
        // console.log(rci +'--Mounted------' + gcd + '---' + '---' + n_d_gcn_rcn);
        this.root_category_id = rci;
        this.goods_category_id = gcd;
        this.name_describe_goodsCategoryName_rootCategoryName = n_d_gcn_rcn;
      })
    },
    methods: {
      preClick() {
        // this.index--; // (不正确的使用,直接对props属性进行修改)要把index进行--操作,再把index作为参数传出,否则index值不变会影响接下来的业务逻辑
        // this.i--; // 要把i进行--操作,再把i作为参数传出,否则i值不变会影响接下来的业务逻辑
        this.$emit('pre', {
          rci: this.root_category_id,
          gcd: this.goods_category_id,
          n_d_gcn_rcn: this.name_describe_goodsCategoryName_rootCategoryName,
          i: this.index,
        })
      },
      nextClick() {
        // let i = this.index++; // (不正确的使用,直接对props属性进行修改)要把index进行++操作,再把index作为参数传出,否则index值不变会影响接下来的业务逻辑
        // this.i++; // 要把i进行++操作,再把i作为参数传出,否则i值不变会影响接下来的业务逻辑
        this.$emit('next', {
          rci: this.root_category_id,
          gcd: this.goods_category_id,
          n_d_gcn_rcn: this.name_describe_goodsCategoryName_rootCategoryName,
          i: this.index,
        })
      },

    }
  }
</script>

<style scoped>
  .option-site-footer {
    height: 71px;
    line-height: 71px;

    /*background-color: green;*/
  }

  .point {
    float: right;
    border-radius: 6px;
    transform: translateY(16px);
  }
  .point div {
    padding: 5px;

    height: 30px;
    line-height: 30px;
    float: left;

    text-align: center;
    color: #007bff;

    border: 1px solid #cdcdcd;
    background-color: white;

    /*background-color: red;*/
  }
  .point div:hover {
    background-color: #eeeeee;
    opacity: 0.75;
    cursor: pointer;
  }
  .point div span {
    /*background-color: red;*/
  }
  .point .pre {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .point .next {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
</style>